<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.键盘事件</title>
		<style>
			input{
				width: 251px;
				margin-top: 20px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按键别名（牢牢掌握）：
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab（必须配	合keydown才有效果）
						上 => up
						下 => down
						左 => left
						右 => right
			2.备注：也可以使用keyCode去指定具体的按键（不太推荐）
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<input @keyup.enter="showMsg" type="text" placeholder="输入内容，按下回车提示输入"><br/>
			<input @keyup.13="showMsg" type="text" placeholder="输入内容，按下回车提示输入"><br/>
			<input @keyup.delete="showMsg" type="text" placeholder="输入内容，按下删除提示输入"><br/>
			<input @keyup.esc="showMsg" type="text" placeholder="输入内容，按下esc提示输入"><br/>
			<input @keyup.space="showMsg" type="text" placeholder="输入内容，按下空格提示输入"><br/>
			<input @keydown.tab="showMsg" type="text" placeholder="输入内容，按下tab提示输入"><br/>
			<input @keyup.down="showMsg" type="text" placeholder="输入内容，按下↓提示输入"><br/>
			<input @keyup.w="showMsg" type="text" placeholder="输入内容，按下w提示输入">
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			methods:{
				showMsg(){
					console.log(event.target.value)
				}
			}
		})
	</script>
</html>